<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="../../favicon.ico" rel="shortcut icon" />
<link href="../../base.css" rel="stylesheet" type="text/css" media="screen" />
<script src="../../jquery/jquery.js" type="text/javascript"></script>
<script src="../../ux/jquery.ux.js" type="text/javascript"></script>
<script src="../../ux.sortable/jquery.ux.sortable.js" type="text/javascript"></script>
<title>jquery.ux.sortable</title>
</head><body>

<a href="./">&laquo; Index</a>

<style type="text/css">
.ux-sortable {
	table-layout: fixed;
	border-collapse: collapse;
	}
.ux-sortable thead td {
	border-width: 2px 1px;
	padding: 4px 10px;
	background: #CCC;
	cursor: pointer;
	}
.ux-sortable td {
	border: 1px solid #555;
	padding: 5px 10px;
	}	
.ux-sortable .ux-sortable-asc {
	border-top-color: #B00;
	}
.ux-sortable .ux-sortable-dsc {
	border-bottom-color: #B00;
	}
</style>

<script type="text/javascript">
jQuery(function($){
	$('#sort1').sortable({
		columns: ["123","abc","123","123"]
		});
	});
</script>

<h2>ux.sortable / columns</h2>

<table cellpadding="0" cellspacing="0" border="0" id="sort1">
	<thead>
    	<tr><td>#</td><td>Name</td><td>Diameter</td><td>Satelites</td></tr>
        </thead>
	<tbody>
		<tr><td>2</td><td>Venus</td><td>12,104 km</td><td>0</td></tr>
    	<tr><td>1</td><td>Mercury</td><td>4,880 km</td><td>0</td></tr>
        <tr><td>5</td><td>Jupiter</td><td>142,984 km</td><td>63</td></tr>
        <tr><td>3</td><td>Earth</td><td>12,742 km</td><td>1</td></tr>
        <tr><td>6</td><td>Saturn</td><td>120,536 km</td><td>52</td></tr>
        <tr><td>8</td><td>Neptune</td><td>49,528 km</td><td>13</td></tr>
        <tr><td>4</td><td>Mars</td><td>6,792 km</td><td>2</td></tr>
		<tr><td>7</td><td>Uranus</td><td>51,118 km</td><td>27</td></tr>
        </tbody>
	</table>
</body></html>